<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算练习</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        body {
            background-color: lightgreen;
            letter-spacing: 2px;
        }
        #content {
            font-size: 24px;
        }
        #level {
            font-size: 24px;
        }
        #answer {
            width: 80px;
            padding: 0 10px;
            height: 32px;
            background-color: #ffffff;
            font-size: 24px;
            text-align: left;
        }
        #info {
            color: red;
        }
        table {
            margin-top: 20px;
        }
        td {
            width: 80px;
            height: 80px;
            font-size: 24px;
        }
    </style>
    <script type="text/javascript">
    	document.oncontextmenu = function() {
    		return false;
    	}
    </script>
</head>
<body>
<h1 style="text-align: center;">计算练习</h1>
<div id="content" style="text-align: center;">
</div>

<script type="text/javascript">
    let COUNT = 50, ERROR = 0, TIMEOUT = 10;
    let level, strs, a, b, op, question, answer, count, error, start_time;

    function init() {
        $("#content").html(`<div>级别：
            <select id="level" name="level">
            <option value="0">5以内加减</option>
            <option value="1" selected="selected">100以内加减</option>
            <option value="2">10以内乘法</option>
            </select>
            </div><br>
            <div id="total">题目数量：</div><br>
            <div style="display: flex; justify-content: center">
            <text id="question" flex=2></text>
            <div id="answer" flex=2></div>
            <div id="info" flex=1></div>
            </div>
            <table border="1px" cellspacing="2" align="center" bgcolor="lightgray" bordercolor="white">
            <tr align="center">
            <td onclick="OnClick(this)">7</td>
            <td onclick="OnClick(this)">8</td>
            <td onclick="OnClick(this)">9</td>
            </tr>
            <tr align="center">
            <td onclick="OnClick(this)">4</td>
            <td onclick="OnClick(this)">5</td>
            <td onclick="OnClick(this)">6</td>
            </tr>
            <tr align="center">
            <td onclick="OnClick(this)">1</td>
            <td onclick="OnClick(this)">2</td>
            <td onclick="OnClick(this)">3</td>
            </tr>
            <tr align="center">
            <td onclick="OnClick(this)">清除</td>
            <td onclick="OnClick(this)">0</td>
            <td onclick="OnClick(this)">确定</td>
            </tr>
            </table>`);
        count = COUNT;
        level = "1"
        error = 0;
        strs = "";
        generateQuestion();
        start_time = new Date().getTime();

        // 选择等级
        $("#level").change(function(){
            level = $("#level").val();
            count = COUNT;
            error = 0;
            strs = "";
            generateQuestion();
            start_time = new Date().getTime();
        })

    }

    // 数字按键事件
    function OnClick(obj) {
        let str = obj.innerText;

        if (str == "确定") {
            if ($("#answer").text() == "") {
                return;
            }
            if ($("#answer").text() != answer) {
                error++;
                $("#info").text("x");
                return;
            }
            count--;
            if (count > 0) {
                generateQuestion();
            } else {
                var end_time = new Date().getTime();
                let dateDiff = end_time - start_time;//时间差的毫秒数
                let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
                let leave1=dateDiff%(24*3600*1000) //计算天数后剩余的毫秒数
                let hours=Math.floor(leave1/(3600*1000))//计算出小时数
                //计算相差分钟数
                let leave2=leave1%(3600*1000) //计算小时数后剩余的毫秒数
                let minutes=Math.floor(leave2/(60*1000))//计算相差分钟数
                //计算相差秒数
                let leave3=leave2%(60*1000) //计算分钟数后剩余的毫秒数
                let seconds=Math.round(leave3/1000)
                $("#content").html("<div>" + $("#level")[0].options[parseInt(level)].text + "总共用时" + minutes + "分" +　seconds + "秒，答错了" + error + "次</div><br>");
                if (error > ERROR || minutes > TIMEOUT){
                    $("#content").append("<button style='width: 120px; height: 60px; font-size: 24px; letter-spacing: 2px;' onclick='init()'>请继续</button>")
                } else {
                    $("#content").append("<div>今日练习结束！</div>")
                }
            }
            strs = "";
            str = "";

        } else if (str == "清除") {
            $("#info").text("");
            strs = "";
            str = "";
        } else {
            strs += str;
        }
        $("#answer").text(strs);
    }

    // 生成随机数
    function generateNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    // 生成问题
    function generateQuestion() {
        switch(level){
            case "0":
            generateQuestionPlus(1, 5);
            break;
            case "1":
            generateQuestionPlus(1, 99);
            break;
            case "2":
            generateQuestionMul(1, 9);
            break;
        }
        $("#total").text("题目数量：" + count);
        question = a + " " + op + " " + b;
        answer = eval(question.replace("x", "*"));
        $("#question").html(question + "=");
        $("#answer").val("");
        $("#answer").focus();
    }
    function generateQuestionPlus(min, max){
    	op = Math.random() > 0.5 ? "+" : "-";
        a = generateNum(min, max);
        if (op == "+") {
        	b = generateNum(min, max);
        } else {
        	b = generateNum(min, a);
        }
    }
    function generateQuestionMul(min, max){
        a = generateNum(min, max);
        b = generateNum(min, max);
        op = "x";
    }

    init();    
</script>
</body>